<template>
	<view class="indexPage">
		<Start v-if='isSelected==1' ref="Start" />
		<Book v-if='isSelected==2' ref="Book"/>
		<Video v-if='isSelected==3' ref="Video"/>
		<My v-if='isSelected==4' />

		<div class='myTabBar'>

		<!-- 	<div @click='to(1)'>
				<div :class="isSelected==1?'startImgTo':'startImg'"></div>
				<div :style="isSelected==1?'color: #a87100':''">书架</div>
			</div> -->
			<div @click='to(2)'>
				<div :class="isSelected==2?'bookImgTo':'bookImg'"></div>
				<div :style="isSelected==2?'color: #a87100':''">电子书</div>
			</div>
			<div @click='to(3)'>
				<div :class="isSelected==3?'videoImgTo':'videoImg'"></div>
				<div :style="isSelected==3?'color: #a87100':''">资源</div>
			</div>
			<!-- <div @click='to(4)'>
				<div :class="isSelected==4?'myImgTo':'myImg'"></div>
				<div :style="isSelected==4?'color: #a87100':''">我的</div>
			</div> -->
		</div>
	</view>
</template>

<script>
	import Start from '@/pages/start/index.vue'
	import Book from '@/pages/book/index.vue'
	import Video from '@/pages/course/index.vue'
	import My from '@/pages/my/index.vue'
	export default {
		data() {
			return {
				isSelected: 2
			};
		},
		components: {
			Start,
			Book,
			Video,
			My,
		},
		onLoad(e) {
			this.isSelected=e.type||2
		},
		onShow() {
			// uni.setStorageSync('token', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6Miwibmlja25hbWUiOiJ0ZXN0IiwidXNlcm5hbWUiOiIxODg0MTAwMDAwMCIsImhlYWRfcG9ydHJhaXQiOiIifQ.n_1s-hi3GuSmV0EiEAt3zHFzG3_wUwqDXJMZAMvuBTI');
			// let _this=this
			// uni.getSystemInfo({
			// 	success: function (res) {
			// 		console.log('res.model==',res.model);
			// 		console.log('res.deviceId==',res.deviceId);
			// 		uni.setStorageSync('deviceId', res.deviceId);
			// 	}
			// });
			//console.log('index执行了onShow');
			// 生产
			// uni.setStorageSync('token', 'f239d0d31b934bfc915cd60bafda92cd');
			// this.getNews()
			// document.title='线上学习'
		},
		// watch: {
		// 	searchVal(val) {
		// 		//console.log('val==', val)
		// 	},
		// },
		mounted() {
			//console.log('index执行了mounted');
			// this.isSelected = 2
			// document.title='线上学习'
			// this.getIndexData()
			// let _this=this
			// _this.$nextTick(function(){
			// 	_this.$nextTick(function(){
			// 		if(_this.isSelected==3){
			// 			_this.$refs.Video.indexTo(4);
			// 		}
			// 	})
			// })
		},
		onHide() {
			//console.log('index执行了onHide');
		},
		beforeDestroy() {
			//console.log('index执行了beforeDestroy');
		},
		onReachBottom() {
			if(this.isSelected==1){
				//console.log('书架滚动了cont',this.$refs.Book)
				this.$refs.Start.getMore();
			}
			if(this.isSelected==2){
				//console.log('电子书滚动了cont',this.$refs.Book)
				this.$refs.Book.getMore();
			}
			if(this.isSelected==3){
				//console.log('视频滚动了cont',this.$refs.Video)
				this.$refs.Video.getMore();
			}
		},
		methods: {
			to(num) {
				if(num==0){
					// uni.navigateTo({
					// 	url: `/pages/course/index`
					// });
				}else{
					this.isSelected = num
				}
			},
			getIndexData(){
				this.$refs.Book.init();
			},
		}
	}
</script>

<style lang="less" scoped>
	.indexPage {
		position: relative;
		left: 0;
		top: 0;
	}

	.myTabBar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		z-index: 9999;
		width: 100vw;
		background-color: white;
		border-top: 1px solid f8f8fa;
		font-size: 24rpx;
		box-shadow: 0px 2px 12px 0px rgba(202, 202, 202, 0.5);
		background-color: #eee8e3;
		.startImg {
			background: url(~@/static/imgs/icon_tabbar_shujia.png) no-repeat center;
			background-size: 100% 100%;
			width: 44rpx;
			height: 44rpx;
			margin: 0 auto;
		}
		.startImgTo {
			background: url(~@/static/imgs/icon_tabbar_shujia_o.png) no-repeat center;
			background-size: 100% 100%;
			width: 44rpx;
			height: 44rpx;
			margin: 0 auto;
		}

		.bookImg {
			background: url(~@/static/imgs/icon_tabbar_dianzishu_o.png) no-repeat center;
			background-size: 100% 100%;
			width: 44rpx;
			height: 44rpx;
			margin: 0 auto;
		}
		.bookImgTo {
			background: url(~@/static/imgs/icon_tabbar_dianzishu.png) no-repeat center;
			background-size: 100% 100%;
			width: 44rpx;
			height: 44rpx;
			margin: 0 auto;
		}

		.videoImg {
			background: url(~@/static/imgs/icon_tabbar_shipin.png) no-repeat center;
			background-size: 100% 100%;
			width: 44rpx;
			height: 44rpx;
			margin: 0 auto;
		}
		.videoImgTo{
			background: url(~@/static/imgs/icon_tabar_shipin_o.png) no-repeat center;
			background-size: 100% 100%;
			width: 44rpx;
			height: 44rpx;
			margin: 0 auto;
		}
		.myImg {
			background: url(~@/static/imgs/icon_tabbar_user.png) no-repeat center;
			background-size: 100% 100%;
			width: 44rpx;
			height: 44rpx;
			margin: 0 auto;
		}
		.myImgTo {
			background: url(~@/static/imgs/icon_tabbar_user_o.png) no-repeat center;
			background-size: 100% 100%;
			width: 44rpx;
			height: 44rpx;
			margin: 0 auto;
		}
	}
</style>
